:root {
  /* Custom colors */
  --vp-c-bg: #fafafa;
  --vw-fg: #6a6a6a;
  --vw-purple: #9a77cf;
  --vw-green: #1da912;
  --vw-blue: #118dc3;
  --vw-yellow: #eea825;

  /* Base */
  --vw-base-bg: var(--vp-c-bg);
  --vw-base-fg: var(--vw-fg);
  --vw-base-bg-mixer: 10%;

  --vp-c-brand-1: var(--vw-purple);
  --vp-c-text-1: #6a6a6a;
  --vp-c-text-3: var(--vw-yellow);
  --vp-code-color: var(--vp-c-brand-1);

  /* Note info panel */
  --vp-custom-block-note-bg: color-mix(
    in srgb,
    var(--vw-blue) var(--vw-base-bg-mixer),
    var(--vw-base-bg)
  );
  --vp-custom-block-note-border: var(--vw-blue);
  --vp-custom-block-note-text: color-mix(
    in srgb,
    var(--vp-c-text-1) var(--vw-base-bg-mixer),
    var(--vw-base-fg)
  );
  --vp-custom-block-note-code-bg: color-mix(
    in srgb,
    var(--vw-blue) 10%,
    var(--vw-base-bg)
  );

  /* Important info panel */
  --vp-custom-block-important-bg: color-mix(
    in srgb,
    var(--vw-purple) 10%,
    var(--vw-base-bg)
  );
  --vp-custom-block-important-border: var(--vw-purple);
  --vp-custom-block-important-text: color-mix(
    in srgb,
    var(--vp-c-text-1) var(--vw-base-bg-mixer),
    var(--vw-base-fg)
  );
  --vp-custom-block-important-code-bg: color-mix(
    in srgb,
    var(--vw-purple) 25%,
    var(--vw-base-bg)
  );

  --vp-custom-block-tip-bg: color-mix(
    in srgb,
    var(--vw-green) 10%,
    var(--vw-base-bg)
  );
  --vp-custom-block-tip-border: var(--vw-green);
  --vp-custom-block-tip-text: color-mix(
    in srgb,
    var(--vp-c-text-1) var(--vw-base-bg-mixer),
    var(--vw-base-fg)
  );
  --vp-custom-block-tip-code-bg: color-mix(
    in srgb,
    var(--vw-green) 25%,
    var(--vw-base-bg)
  );

  /* even‑row stripes */
  --vp-c-bg-soft: color-mix(in srgb, var(--vw-blue) 5%, var(--vp-c-bg));
}

.dark {
  /* Custom colors */
  --vw-fg: #b4b7cf;
  --vw-purple: #c678dd;
  --vw-green: #75be78;
  --vw-blue: #25abe4;
  --vw-yellow: #eae852;
  --vp-c-bg: #1b1d2a;

  --vp-c-bg-alt: #222435;
  --vp-c-brand-2: var(--vw-green);
  --vp-c-gutter: var(--vw-blue);
  --vp-c-divider: var(--vw-green);
  --vp-c-text-1: #b4b7cf;
  --vp-c-text-2: #8e91b7;
  --vp-c-text-3: var(--vw-yellow);

  /* Override base background for dark mode */
  --vw-base-bg-mixer: 20%;

  .vp-doc table th,
  .vp-doc table td {
    border: 1px solid color-mix(in srgb, var(--vw-green) 40%, var(--vp-c-bg)) !important;
  }
  --vp-c-bg-soft: color-mix(in srgb, var(--vp-c-bg-alt) 80%, var(--vp-c-bg));
}

/* Mermaid */
.mermaid * {
  font-family: var(--vp-font-family-base) !important;
  font-weight: var(--vp-font-weight-regular, 400) !important;
}

.mermaid .noteText,
.mermaid .loopText {
  font-size: 0.9em !important;
}

.mermaid .note {
  fill: color-mix(in srgb, var(--vw-purple) 40%, var(--vw-base-bg)) !important;
  stroke: var(--vw-purple) !important;
}

.mermaid .actor {
  fill: color-mix(in srgb, var(--vw-blue) 20%, var(--vw-base-bg)) !important;
  stroke: var(--vw-blue) !important;
  font-weight: var(--vp-font-weight-medium, 500) !important;
}

.mermaid text.actor > tspan {
  fill: var(--vw-base-fg) !important;
  stroke: none !important;
  font-weight: var(--vp-font-weight-medium, 500) !important;
}

.mermaid .messageText {
  fill: var(--vw-base-fg) !important;
  stroke: none !important;
}

.mermaid .messageLine0,
.mermaid .messageLine1 {
  stroke: var(--vw-green) !important;
}

.mermaid .sequenceNumber {
  fill: var(--vw-base-bg) !important;
}

.mermaid .loopLine {
  stroke: var(--vw-yellow) !important;
}

.mermaid .loopText > tspan {
  fill: var(--vw-base-fg) !important;
  stroke: none !important;
}

.mermaid .labelBox {
  fill: color-mix(in srgb, var(--vw-yellow) 20%, var(--vw-base-bg)) !important;
  stroke: var(--vw-yellow) !important;
}

.mermaid .labelText {
  fill: var(--vw-base-fg) !important;
}

.mermaid line.divider {
  stroke: var(--vw-purple) !important;
}

.mermaid .noteText > tspan {
  fill: var(--vw-base-fg) !important;
  stroke: none !important;
  font-weight: var(--vp-font-weight-regular, 400) !important;
}

/* Adds styling for the activation boxes */
.mermaid .activation0,
.mermaid .activation1,
.mermaid .activation2 {
  fill: color-mix(in srgb, var(--vw-green) 20%, var(--vw-base-bg)) !important;
  stroke: var(--vw-green) !important;
}
